<template>
  <el-container class="admin-container">
    <!-- 侧边栏 -->
    <el-aside
        :width="isCollapsed ? '64px' : '220px'"
        class="sidebar"
        :class="{ 'sidebar-collapsed': isCollapsed }"
    >
      <div class="logo-container" @click="isCollapsed = !isCollapsed">
        <transition name="fade" mode="out-in">
          <span v-if="!isCollapsed" class="logo-text">商家商品系统</span>
          <el-icon v-else class="logo-icon"><el-icon-s-shop /></el-icon>
        </transition>
      </div>

      <el-menu
          :default-active="activeMenu"
          mode="vertical"
          :collapse="isCollapsed"
          @select="handleMenuSelect"
          class="side-menu"
          active-text-color="#409EFF"
          background-color="#001529"
          text-color="#bfcbd9"
      >
        <el-sub-menu index="merchant" popper-class="submenu-popper">
          <template #title>
            <el-icon><el-icon-s-shop /></el-icon>
            <span>商家管理</span>
          </template>
          <el-menu-item index="merchantList">
            <el-icon><el-icon-view /></el-icon>
            <span>查看店铺</span>
          </el-menu-item>
          <el-menu-item index="merchantAdd">
            <el-icon><el-icon-circle-plus /></el-icon>
            <span>添加店铺</span>
          </el-menu-item>
          <el-menu-item index="merchantRevise">
            <el-icon><el-icon-edit /></el-icon>
            <span>修改店铺信息</span>
          </el-menu-item>
          <el-menu-item index="merchantDelete">
            <el-icon><el-icon-delete /></el-icon>
            <span>删除店铺</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="product" popper-class="submenu-popper">
          <template #title>
            <el-icon><el-icon-goods /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item index="productList">
            <el-icon><el-icon-search /></el-icon>
            <span>查询商品</span>
          </el-menu-item>
          <el-menu-item index="productAdd">
            <el-icon><el-icon-circle-plus /></el-icon>
            <span>添加商品</span>
          </el-menu-item>
          <el-menu-item index="productUpdate">
            <el-icon><el-icon-edit /></el-icon>
            <span>修改商品</span>
          </el-menu-item>
          <el-menu-item index="productDelete">
            <el-icon><el-icon-delete /></el-icon>
            <span>删除商品</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="order" popper-class="submenu-popper">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="order">
            <el-icon><Tickets /></el-icon>
            <span>所有订单</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="live" popper-class="submenu-popper">
          <template #title>
            <el-icon><VideoCamera /></el-icon>
            <span>直播管理</span>
          </template>
          <el-menu-item index="live">
            <el-icon><VideoPlay /></el-icon>
            <span>直播功能</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

      <div class="collapse-button" @click="isCollapsed = !isCollapsed">
        <el-icon :class="{ 'rotate-icon': isCollapsed }">
          <el-icon-d-arrow-left v-if="!isCollapsed" />
          <el-icon-d-arrow-right v-else />
        </el-icon>
      </div>
    </el-aside>

    <el-container class="main-container">
      <!-- 顶部导航栏 -->
      <el-header class="main-header">
        <div class="header-content">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="item in breadcrumbs" :key="item">
                {{ item }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="user-info">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar :size="36" :src="userAvatar" />
                <span class="username">商家</span>
                <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>系统设置</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <div class="content-card">
          <component :is="currentComponent"></component>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {
  Shop as ElIconSShop,
  View as ElIconView,
  CirclePlus as ElIconCirclePlus,
  Edit as ElIconEdit,
  Delete as ElIconDelete,
  Goods as ElIconGoods,
  Search as ElIconSearch,
  DArrowLeft as ElIconDArrowLeft,
  DArrowRight as ElIconDArrowRight,
  ArrowDown as ElIconArrowDown
} from '@element-plus/icons-vue';
import MerchantListView from './MerchantListView.vue';
import MerchantView from './MerchantView.vue';
import MerchantReviseView from './MerchantReviseView.vue';
import MerchantDeleteView from './MerchantDeleteView.vue';
import ProductList from './ProductList.vue';
import ProductAddView from './ProductAddView.vue';
import ProductUpdateView from './ProductUpdateView.vue';
import ProductDeleteView from './ProductDeleteView.vue';
import Live from "@/views/merchant/Live.vue";
import Order from "@/views/merchant/Order.vue";

const isCollapsed = ref(false);
const activeMenu = ref('merchantList');
const currentComponent = ref(MerchantListView);
const userAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

const user = ref(getUser());

const logout = () => {
  if (confirm('您确定要退出登录吗？')) {
    localStorage.removeItem('merchant');
    window.location.href = '/login';
    user.value = '';
  }
}

const menuMap = {
  merchantList: { name: '查看店铺', category: '商家管理' },
  merchantAdd: { name: '添加店铺', category: '商家管理' },
  merchantRevise: { name: '修改店铺信息', category: '商家管理' },
  merchantDelete: { name: '删除店铺', category: '商家管理' },
  productList: { name: '查询商品', category: '商品管理' },
  productAdd: { name: '添加商品', category: '商品管理' },
  productUpdate: { name: '修改商品', category: '商品管理' },
  productDelete: { name: '删除商品', category: '商品管理' },
  live: { name: '直播功能', category: '直播管理' },
  order: { name: '所有订单', category: '订单管理' },
};

const breadcrumbs = computed(() => {
  const current = menuMap[activeMenu.value];
  return current ? ['系统管理', current.category, current.name] : ['系统管理'];
});

const handleMenuSelect = (index) => {
  activeMenu.value = index;
  switch (index) {
    case 'merchantList':
      currentComponent.value = MerchantListView;
      break;
    case 'merchantAdd':
      currentComponent.value = MerchantView;
      break;
    case 'merchantRevise':
      currentComponent.value = MerchantReviseView;
      break;
    case 'merchantDelete':
      currentComponent.value = MerchantDeleteView;
      break;
    case 'productList':
      currentComponent.value = ProductList;
      break;
    case 'productAdd':
      currentComponent.value = ProductAddView;
      break;
    case 'productUpdate':
      currentComponent.value = ProductUpdateView;
      break;
    case 'productDelete':
      currentComponent.value = ProductDeleteView;
      break;
    case 'live':
      currentComponent.value = Live;
      break;
    case 'order':
      currentComponent.value = Order;
      break;
    default:
      currentComponent.value = MerchantListView;
  }
};
</script>

<style scoped lang="scss">
.admin-container {
  height: 100vh;
  overflow: hidden;

  .sidebar {
    background-color: #001529;
    transition: width 0.3s ease;
    position: relative;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

    .logo-container {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-color: #002140;
      overflow: hidden;

      .logo-text {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
      }

      .logo-icon {
        color: #fff;
        font-size: 24px;
      }
    }

    .side-menu {
      border-right: none;
      height: calc(100vh - 120px);
      overflow-y: auto;

      &:not(.el-menu--collapse) {
        width: 220px;
      }

      .el-icon {
        font-size: 18px;
        margin-right: 5px;
      }
    }

    .collapse-button {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fff;
      background-color: #002140;
      transition: all 0.3s;

      &:hover {
        background-color: #1a324f;
      }

      .el-icon {
        font-size: 20px;
        transition: all 0.3s;
      }

      .rotate-icon {
        transform: rotate(180deg);
      }
    }
  }

  .main-container {
    .main-header {
      height: 60px;
      padding: 0;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

      .header-content {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;

        .breadcrumb {
          .el-breadcrumb {
            font-size: 14px;
          }
        }

        .user-info {
          .el-dropdown-link {
            display: flex;
            align-items: center;
            cursor: pointer;

            .username {
              margin: 0 8px;
              font-size: 14px;
            }
          }
        }
      }
    }

    .main-content {
      padding: 20px;
      background-color: #f0f2f5;
      height: calc(100vh - 60px);
      overflow-y: auto;

      .content-card {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        min-height: calc(100% - 40px);
        padding: 20px;
      }
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

<style>
.submenu-popper {
  background-color: #000c17 !important;

  .el-menu-item {
    background-color: #000c17 !important;

    &:hover {
      background-color: #1890ff !important;
    }
  }

  .el-menu-item.is-active {
    background-color: #1890ff !important;
  }
}
</style>